<template>
  <div class="input-demo-page flex flex-grow flex-col box-border">
    <!-- top-bar -->
    <div
      class="h-15 w-full box-border flex flex-row justify-around items-center"
    >
      <div class="flex flex-grow text-4 font-mono">123</div>
      <Avatar />
    </div>
    <button
        class="focus:outline-none px-5 py-2 text-sm leading-5 rounded-full font-semibold text-white"
        bg="violet-500 hover:violet-600 active:violet-700"
        ring="focus:~ focus:violet-300"
      >
        Save changes
      </button>
    <div
      class="flex flex-grow box-border gap-4 flex-wrap content-start"
      border="~ gray-3 solid rounded rounded-b rounded-t-none"
      p="4"
    >
      <div
        class="item h-45 w-60 transition-100 overflow-hidden"
        border="~ rounded gray-300 solid"
        bg="gray-100 hover:gray-100/75 "
        shadow="hover:lg"
        flex="~ col"
      >
        <!-- top -->
        <div
          h="2/3"
          bg="yellow-1"
        ></div>
        <!-- bottom -->
        <div
          h="1/3"
          bg="red-1"
        ></div>
      </div>
      <div
        class="item h-30 w-60"
        border="~ rounded blue-300 solid"
        bg="blue-1"
      ></div>
      <div
        class="item h-30 w-60"
        border="~ rounded blue-300 solid"
        bg="blue-1"
      ></div>
      <div
        class="item h-30 w-60"
        border="~ rounded blue-300 solid"
        bg="blue-1"
      ></div>
      <div
        class="item h-30 w-60"
        border="~ rounded blue-300 solid"
        bg="blue-1"
      ></div>
      <div
        class="item h-30 w-60"
        border="~ rounded blue-200 solid"
        bg="blue-3"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Avatar from "@/Layout/Avatar.vue";
</script>

<style scoped>
.input-demo-page {
}
</style>
